<html>
  <head>
    <script type="application/javascript">
      function draw() {
        /** @type {HTMLCanvasElement} */
        var ctx = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.onload = function () {
          ctx.drawImage(img, 0, 0);
          ctx.beginPath();
          ctx.moveTo(30, 96);
          ctx.lineTo(70, 66);
          ctx.lineTo(103, 76);
          ctx.lineTo(170, 15);
          ctx.stroke();
        };
        img.src = "https://www.baidu.com/favicon.ico";
      }
      function draw1() {
        /** @type {HTMLCanvasElement} */
        var ctx = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.onload = function () {
          for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 3; j++) {
              ctx.drawImage(img, j * 70, i * 70, 70, 70);
            }
          }
        };
        img.src = "https://www.baidu.com/favicon.ico";
      }
    </script>
  </head>
  <body onload="draw1();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
<style>
  #canvas {
    background-color: aqua;
  }
</style>
